<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
   <style type="text/css" media="screen">
    body {
      background-color: #fff;
      color: #444;
      font-family: 'Helvetica Neue', Helvetica, Arial;
      font-size: 13px;
      padding: 0;
      margin: 0;
      text-shadow: rgba(255, 255, 255, 0.3) 1px 0px 1px;
    }
    
    a {
      color: #000;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    .clear {
      clear: both;
    }
    
    #card-container {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      position: relative;
      margin: 0px 0px 0px 0px;
      padding: 0px;
      width: 300px;
    }
    
    #card {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background-image: url(bg.card.png);
      background-position: 0 0;
      background-repeat: repeat;
      border-color: #fff;
      border-style: solid;
      border-width: 1px 0 0 1px;
      padding: 5px 5px 10px;
      margin: 0;
    }
    
    #avatar {
      float: left;
      padding: 5px;
      width: 60px;
    }
    
    #avatar img {}
    
    #info {
      float: left;
      width: 219px;
    }
    
    #info h1 {
      color: #333;
      font-size: 16px;
      padding: 0;
      margin: 5px 0;
    }
    
    #info p {
      font-family: Arial;
      font-size: 12px;
      margin: 0 0 10px 0;
      word-wrap: break-word;
    }
    
    #info p.no-bio {
      color: #999;
      font-style: normal;
    }
    
    #actions {
      clear: both;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }
    
    #actions li {
      padding: 0; margin: 0;
    }
    
    #actions li a {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      background-color: #f2f2f2;
      background-image: url(btn.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      border: 1px solid #ccc;
      color: #666;
      display: inline-block;
      font-family: Arial;
      font-size: 11px;
      padding: 5px 8px; }
      
      #actions li a:hover {
        border: 1px solid #c1c1c1;
        text-decoration: none; }
        
      #actions li a:active {
        background-color: #ccc;
        background-image: none;
        border: 1px solid #ccc; }
    
  </style>
</head>
<body>
  
  <div id="card-container">
    <div id="card" class="group">
      <div id="avatar">
        <img id="avatar-img" width="55" src="" alt=""/>
      </div>
    
      <div id="info">
        <h1 id="displayName"></h1>
        <h2 id="webfinger"></h2>
        <p id="bio"></p>
        <ul id="actions">
          <li><a href="#" id="follow" onClick="javascript:startFollowing();">Follow</a></li>
          <li><a href="#" id="stopFollowing" onClick="javascript:stopFollowing();">Stop Following</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <!-- end #card -->
<script>
    var queryString = {};
    
    var qs = window.location.search.replace(/\+/g, ' ');
	var args = qs.substring(1).split('&');
	
	for (var i = 0; i < args.length; i++) {
		var pair = args[i].split('=');
		var name = decodeURIComponent(pair[0]);
		var value = (pair.length==2) ? decodeURIComponent(pair[1]) : name;
		queryString[name] = value;
    }

    document.getElementById("avatar-img").src = queryString['thumbnailUrl'];
    document.getElementById("avatar-img").alt = queryString['displayName']; 
    document.getElementById("displayName").innerHTML = queryString['displayName'];
    document.getElementById("displayName").href = queryString['profileUrl'];
    document.getElementById("webfinger").innerHTML = queryString['webfinger'];
    document.getElementById("bio").innerHTML = queryString['bio'];

    if (queryString['isFollowing'] === 'true') {
      document.getElementById("follow").style.display = 'none';
      document.getElementById("stopFollowing").style.display = 'inline-block';
    } else {
      document.getElementById("follow").style.display = 'inline-block';
      document.getElementById("stopFollowing").style.display = 'none';    
    }

function startFollowing() {
  chrome.extension.getBackgroundPage().startFollowing(document.getElementById("webfinger").innerHTML);
}

function stopFollowing() {
  chrome.extension.getBackgroundPage().stopFollowing(document.getElementById("webfinger").innerHTML);
}
</script>
  
</body>
</html>